<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML5 Canvas</title>
  </head>

  <body>
    <canvas id="draw" width="800" height="800"></canvas>
    <script></script>

    <style>
      html,
      body {
        margin: 0;
      }

      canvas {
        border: 1px solid black;
      }
    </style>
    <script>
      // url 图片路径
      function loadImage(url) {
        return new Promise((resolve, reject) => {
          const img = new Image();
          img.setAttribute("crossOrigin", "anonymous");
          img.src = url;
          img.onload = () => {
            // 当图像加载完成后进行resolve
            resolve(img);
          };
          img.onerror = () => {
            reject(new Error("图像加载失败"));
          };
        });
      }

      const canvas = document.querySelector("#draw");
      canvas.width = document.documentElement.clientWidth;
      canvas.height = document.documentElement.clientHeight;
      const ctx = canvas.getContext("2d");

      async function init() {
        var image1 = await loadImage("./3.jpeg");
        let ptrn = ctx.createPattern(image1, "repeat");
        ctx.fillStyle = ptrn;
       


        ctx.beginPath();
        ctx.arc(300, 300, 230, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.globalAlpha = 0.6;
        ctx.filter = "blur(1.5px)";

        ctx.fill();

        
        ctx.beginPath();
        ctx.arc(300, 300, 215, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.globalAlpha = 0.8;
        ctx.filter = "blur(1px)";
        ctx.fill();

        ctx.beginPath();
        ctx.arc(300, 300, 200, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.globalAlpha = 1;

        ctx.filter = "blur(0px)";

        // ctx.filter = "blur(1px)";
        ctx.fill();

      }
      init();

      // image1.onload = function () {
      //   let ptrn = ctx.createPattern(image1, "repeat");
      //   ctx.fillStyle = ptrn;
      //   // ctx.globalAlpha = 0.6;
      //   ctx.fill();
      // };

      // async function syncImg(fn) {
      //   Promise.resolve()
      //   return await fn();
      // }
      // await syncImg()

      // image1.onload = function () {
      //   // 创建图案
      //   let ptrn = ctx.createPattern(image1, "repeat");
      //   ctx.fillStyle = ptrn;
      //   // ctx.globalAlpha = 0.6;
      //   ctx.fill();
      // };

      // ctx.beginPath();
      // ctx.arc(300, 300, 300, 0, Math.PI * 2, true);
      // ctx.closePath();
      // image1.onload = function () {
      //   // 创建图案
      //   let ptrn = ctx.createPattern(image1, "repeat");
      //   ctx.fillStyle = ptrn;
      //   ctx.globalAlpha = 0.6;
      //   ctx.fill();
      // };

      // var image = new Image();
      // image.src = "./2.jpeg";
      // ctx.beginPath();
      // ctx.arc(300, 300, 200, 0, Math.PI * 2, true);
      // ctx.closePath();

      // var image = new Image();
      // image.src = "./2.jpeg";

      // image1.onload = function () {
      //   // 创建图案
      //   ctx.drawImage(image1, 20, 20, 1820, 980);

      //   image.onload = function () {
      //     // 创建图案
      //     let ptrn = ctx.createPattern(image, "repeat");
      //     ctx.fillStyle = ptrn;
      //     ctx.globalAlpha = 0.6;
      //     ctx.fill();
      //   };
      // };
    </script>
  </body>
</html>
